<template>
	<s-layout title="分销中心" navbar="custom1" :bgStyle="template.style?.background" color='#333333'
		onShareAppMessage>
		<view class="content">
			<assNavbar title="创客入驻" />
			<su-tabs :list="state.levelList" lineColor="#48DFBD" :activeStyle="{color:'#48DFBD'}" 
				lineHeight="3" lineWidth="28" :scrollable="false" @change="onTabsChangeTop" 
				:current="state.current"></su-tabs>
			<swiper  :style="{height:pageHeight + 'px'}"  @change="swiperChange" :current="state.current" previous-margin="20rpx"  next-margin="20rpx">
				<swiper-item class="swiper-item" v-for="item in state.levelList" :key="item.id">
					<scroll-view class="scroll-view" scroll-y :style="{height:`calc(${pageHeight}px - 150rpx)`}">
						<image class="cardBox-bg" :src="sheep.$url.cdn(item.equity_image)" mode="widthFix" />
						<image class="infoCard" :src="sheep.$url.cdn(item.equity)" mode="widthFix" />
					</scroll-view>
					<button class="ss-reset-button btn" @click='btnClick'>
						立即入驻
					</button>
				</swiper-item>
			</swiper>
		</view>
		<su-popup :show="state.popupShow" @close="state.popupShow = false">
			<view class="pop">
				<view class="pop-title"> 立即入驻 </view>
				<view class="pop-tips ss-flex">
					<image :src="sheep.$url.cdn('/static/icon/kyq.png')" />
					提交信息后工作人员会帮助您入驻
				</view>
				<view class="pop-form">
					<uni-forms ref="baseForm" :modelValue="formData" border :rules="rules">
						<uni-forms-item label="姓名" name="name">
							<input v-model="formData.name" placeholder="请输入您的姓名" />
						</uni-forms-item>
						<uni-forms-item label="手机号" name="mobile">
							<input v-model="formData.mobile" type="tel"  placeholder="请输入手机号" />
						</uni-forms-item>
						<uni-forms-item label="城市" name="address" >
							<view class="ss-flex-1 ss-flex ss-row-between"  @click="setRegion">
								<view :style="{fontSize:'16px',color:formData.address?'#3C403F':'gray'}">
									{{formData.address || '请选择您所在的地区'}}
								</view>
								<!-- <input v-model="formData.address" disabled   placeholder="请选择您所在的地区" /> -->
								<uni-icons type="right" size="20" color="#3D3E41"/>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="pop-btn">
					<button class="ss-reset-button" @click="submit">提交</button>
				</view>
			</view>
		</su-popup>
		<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import assNavbar from "@/components/ass-navbar.vue"
	import {ref ,reactive, computed, onBeforeMount,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import userApi from "@/sheep/api/user.js"
	import formTest from "@/sheep/helper/test.js"
 	const template = computed(() => sheep.$store('app').template?.home);
	const state = reactive({
		current:0,
		popupShow:false,
		showRegion:false,
		levelList:[],
		code:'',
	})
	const formData =reactive({
		level: "1",
		inviter_code: "",
		inviter_id: "",
		name: "",
		mobile: "",
		address:'',
		province_id: "",
		province_name: "",
		district_id: "",
		district_name: "",
		city_id: "",
		city_name: "",
	})
	const baseForm = ref(null)
	const rules = reactive({
		name: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		address: {
			rules: [{
				required: true,
				errorMessage: '请选择您所在的城市'
			}]
		},
		mobile: {
			rules: [{
				required: true,
				errorMessage: '手机号不能为空'
			}, 	{
				validateFunction: function(rule, value, data, callback) {
					if (!formTest.mobile(value)) {
						callback('手机号格式错误')
					}
					return true
				}
			}]
		}
	})
	let pageHeight = computed(()=>(sheep.$platform.device.safeArea.height  - 44 - 44))
	onLoad((opt)=>{
		getVipList()
	})
	onShow(()=>{ 
	})
	function swiperChange(e){
		state.current = e.detail.current
	}
	function onRegionConfirm (e)  {
		state.showRegion = false;
		state.popupShow = true
		if(e?.district_id){
			formData.province_id = e?.province_id
			formData.province_name = e?.province_name
			formData.district_id = e?.district_id
			formData.district_name = e?.district_name
			formData.city_id = e?.city_id
			formData.city_name = e?.city_name
			formData.address = e?.province_name + e?.city_name + e?.district_name
		}
	}
	function setRegion(){
		state.popupShow = false
		state.showRegion = true;
	}
	function onTabsChangeTop(e){
		state.current = e.index;
	}
	async function submit() {
		try{
			await baseForm.value.validate()
			console.log('submit',{...formData});
			let res = await userApi.supplier.putApply({
				...formData
			})
			if(res.error==0){
				state.popupShow = false
			}
			uni.showToast({
				icon:'none',
				duration:2000,
				title:res.msg
			})
		}catch(e){
			uni.showToast({
				icon:'none',
				title:'请检查表单是否填写完整'
			})
		}
	
	}
	async function getVipList(){

		let res = await userApi.supplier.getVipList()
		if(res){
			state.levelList = res.data
			/* 
			 [
				 {
					 "id": 5,
					 "name": "供应链创客",
					 "icon": "1",
					 "level": 1,
					 "price": 198,
					 "equity_image": "\/static\/supply\/gylck-c.png",
					 "equity": "\/static\/supply\/gylck.png",
					 "create_time": null,
					 "update_time": null,
					 "delete_time": null
				 },
				 {
					 "id": 6,
					 "name": "区县服务商",
					 "icon": "1",
					 "level": 2,
					 "price": 19800,
					 "equity_image": "\/static\/supply\/qxfws-c.png",
					 "equity": "\/static\/supply\/qxfws.png",
					 "create_time": null,
					 "update_time": null,
					 "delete_time": null
				 },
				 {
					 "id": 7,
					 "name": "城市合伙人",
					 "icon": "1",
					 "level": 3,
					 "price": 79800,
					 "equity_image": "\/static\/supply\/cshhr-c.png",
					 "equity": "\/static\/supply\/cshhr.png",
					 "create_time": null,
					 "update_time": null,
					 "delete_time": null
				 }
			 ]*/
		}
	}
	
	function btnClick(){
		formData.level = state.levelList[state.current]?.level
		state.popupShow = true
	}
	
 
	onBeforeMount(() => {
		if (!!uni.getStorageSync('areaData')) {
			return;
		}
		// 提前加载省市区数据
		sheep.$api.data.area().then((res) => {
			if (res.error === 0) {
				uni.setStorageSync('areaData', res.data);
			}
		});
	});
</script>

<style lang="scss" scoped>
	::v-deep{
		.u-tabs{
			background: transparent !important;
			border-bottom: none !important;
		}
		.uni-forms-item__inner{
			padding-bottom: 16rpx;
			.uni-forms-item__content{
				display: flex;
				align-items: center;
			}
		}
		.uni-forms-item--border{
			padding: 10rpx 0 10rpx !important;
		}
	}
	.pop{
		position: relative;
		height: 900rpx;
		.pop-title{
			height: 88rpx;
			font-family: 思源黑体;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 88rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #2C3130;
		}
		.pop-tips{
			image{
				width: 30rpx;
				height: 24rpx;
				margin-right: 12rpx;
			}
			box-sizing: border-box;
			width: 750rpx;
			height: 64rpx;
			background: #F3F4F8;
			font-family: 思源黑体;
			font-size: 24rpx;
			font-weight: normal;
			line-height: 64rpx;
			letter-spacing: 0px;
			color: #656772;
			padding: 0 24rpx;
		}
		.pop-form{
			padding: 0 24rpx;
		}
		.pop-btn{
			width: 100%;
			height: 138rpx;
			button{
				position: absolute;
				bottom: 20rpx;
				left: 24rpx;
				width: 702rpx;
				height: 98rpx;
				font-family: 思源黑体;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 98rpx;
				text-align: center;
				letter-spacing: 0px;
				color: #ECF9F6;
				border-radius: 49rpx;
				background: #35C7A8;
			}
		}
	}
	.content{
		.swiper-item{
			width:750rpx;
			box-sizing: border-box;
			padding: 20rpx 7rpx;
			.scroll-view{
				.cardBox-bg{
					// height: 100%;
					width: 100%;
				}
				.infoCard{
					margin-top: 20rpx;
					width: 100%;
				}
			}
			.btn{
				margin:20rpx auto 0;
				width: 306px;
				height: 90rpx;
				border-radius: 100px;
				background: #47DFBD;
				font-family: PingFang SC;
				font-size: 36rpx;
				font-weight: normal;
				line-height: 90rpx;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				color: #FFFFFF;
			}
		}
	}
</style>